<template>
    <!--pages/feedback/feedback.wxml-->
    <div>
    <div class='wrap column'>
        <div class='tips'>请输入您的症状</div>
        <div class='textarea-wrap column'>
            <textarea class="textarea" placeholder='吃了您开的药5天以后，病情有所好转....' v-model="feedback"></textarea>
        </div>
        <div class='tips'>您的面部照片</div>
        <div class='imgs-wrap flex'>
            <img src='../assets/face-up.png'  class='imgActive img'></img>
            <img :src='faceImg'  class='imgActive img' v-if="faceImg" ></img>
            <div class='add-wrap column' v-else>       
                <img src='../assets/add.png'></img>
                <p>点击上传</p>
                <input type="file" class="input-file"   @change="changeImage($event,'face')" accept="image/*"/>
            </div>
        </div>
        <div class='tips'>您的舌苔照片</div>
        <div class='imgs-wrap flex'>
            <img src='../assets/tongue-up.png'  class='imgActive img'></img>
            <img :src='coatingImg'  class='imgActive img' v-if="coatingImg"></img>
            <div class='add-wrap column' v-else>
                <img src='../assets/add.png'></img>
                <p>点击上传</p>
                <input type="file" class="input-file"  @change="changeImage($event,'coating')" accept="image/*"/>
            </div>
        </div>
        <div class='tips'>您的舌底照片</div>
        <div class='imgs-wrap flex'>
            <img src='../assets/tongue-down.png'  class='imgActive img'></img>
            <img :src='tongueImg'  class='imgActive img' v-if="tongueImg"></img>
            <div class='add-wrap column' v-else>
                <img src='../assets/add.png'></img>
                <p>点击上传</p>
                <input type="file" class="input-file"  @change="changeImage($event,'tongue')" accept="image/*"/>
            </div>
        </div>
    </div>
    <div class='send-btn flex' @click='sendTap'>发送</div>
    </div>
</template>
<script>
    import { patientfeedback } from "./../api/index";
    import { Toast,Indicator } from 'mint-ui';
    import { upLoadUrl } from './../config/index'
    import axios from 'axios'
    export default{
        data(){
            return{
                feedback:'',//反馈
                status:'',//照片类型
                image:'',
                faceImg:'',//面部照片
                coatingImg:'',//舌苔照片
                tongueImg:'',//舌底照片
                faceImg1:'',//面部照片
                coatingImg1:'',//舌苔照片
                tongueImg1:'',//舌底照片
                doctorid:'',//医生id
                registrationid:'',//挂号单id
                recipeid:'',//处方单号
                outTime:1500,
                flag:true
            }
        },
        mounted(){
            this.doctorid = this.$route.params.doctorid
            this.registrationid = this.$route.params.registrationid
            this.recipeid = this.$route.params.recipeid
        },
        methods:{
            //上传图片
            changeImage(e,status){
                this.status = status
                if(!e.target.files[0]){
                    return false
                }
                Indicator.open('上传中')
                let file =  e.target.files[0];  
                let param = new FormData(); //创建form对象 
                let size = file.size
                // if(size>3145728){  
                //     Toast({
                //         message:'请选择3M以内的图片！',
                //         position:'center',
                //         duration:2000
                //     });  
                //     Indicator.close()
                //     return false;  
                // }  
                param.append('image',file,file.name);//);//通过append向form对象添加数据 
                axios.post(upLoadUrl,param).then( res => { 
                    if(res.data.status === 1){
                        if(this.status === 'face'){
                            this.faceImg = res.data.data.url
                            this.faceImg1 = res.data.data.path
                        }else if(this.status === 'coating'){
                            this.coatingImg = res.data.data.url
                            this.coatingImg1 = res.data.data.path
                        }else if(this.status === 'tongue'){
                            this.tongueImg = res.data.data.url
                            this.tongueImg1 = res.data.data.path
                        }
                    }
                    Indicator.close()
                }).catch(err => {
                    Indicator.close()
                    Toast({
                        message:'上传图片出错！',
                        position:'center',
                        duration:2000
                    });
                })    
            },  
            //发送
            sendTap(){
                let mstr = sessionStorage.getItem('mstr')
                if (!this.feedback.replace(/(^\s*)|(\s*$)/g, "")){
                    Toast({
                        message:'请输入您的症状',
                        position:'center',
                        duration:2000
                    })
                    return;
                }
                if(!this.faceImg){
                    Toast({
                        message:'请上传面部照',
                        position:'center',
                        duration:2000
                    })
                    return;
                }
                if (!this.coatingImg) {
                    Toast({
                        message:'请上传舌苔照',
                        position:'center',
                        duration:2000
                    })
                    return;
                }
                if (!this.tongueImg) {
                    Toast({
                        message:'请上传舌底照',
                        position:'center',
                        duration:2000
                    })
                    return;
                }
                Indicator.open('提交中')
                if(this.flag){
                    this.flag = false
                    patientfeedback(mstr,this.doctorid,this.registrationid,this.recipeid,this.feedback,this.faceImg1,this.coatingImg1,this.tongueImg1)
                    .then((res) => {
                        if(res.data.status === 1){
                            Toast({
                                message:'提交成功',
                                position:'center',
                                duration:2000
                            })
                            setTimeout(()=>{
                                this.$router.back(-1)
                            },this.outTime)
                        }else{
                            Toast({
                                message:res.data.info,
                                position:'center',
                                duration:2000
                            })
                        }
                        Indicator.close()
                        setTimeout(()=>{
                            this.flag = true
                        },this.outTime)
                    })
                }    
            }
        }
        
    }
</script>
<style lang="scss" scoped>
/* pages/feedback/feedback.wxss */
@import "../base/css/_base.scss";
.wrap{
    padding: 0 torem(30px);
}
.wrap .tips{
    color: #333333;
    font-size: torem(30px);
    padding: torem(20px) 0;
    margin-top: torem(10px);
}
.textarea-wrap{
    background: #fff;
    width: torem(690px);
	height: torem(190px);
	border-radius: torem(10px);
    font-size: torem(30px);
    color: #333;
    margin-bottom: torem(10px);
    overflow: hidden;
    display: block;
}
.wrap .textarea{
    background: #fff;
    padding: torem(20px);
    width: torem(690px);
	height: torem(190px);
	border-radius: torem(10px);
    font-size: torem(30px);
    color: #333;
    margin-bottom: torem(10px);
}
.wrap .imgs-wrap{
    margin-bottom: torem(30px);
}
.wrap .imgs-wrap .img{
    width: torem(180px);
    height: torem(200px);
    border-radius: torem(6px);
    margin-right: torem(80px);
}
.wrap .imgs-wrap .add-wrap{
    color: #666666;
    font-size: torem(30px);
    height: torem(200px);
    justify-content: flex-end;
    align-items: center;
    position: relative;
}
.imgs-wrap .add-wrap img{
    width: torem(90px);
    height: torem(90px);
    margin-bottom: torem(30px);
}
.imgs-wrap .add-wrap .input-file{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.send-btn{
    width: 100%;
	height: torem(80px);
	background-color: #d55940;
    color: #ffffff;
    font-size: torem(34px);
    align-items: center;
    justify-content: center;
    margin-top:torem(80px);
}
</style>